<template>
  <div class="phone-area-container">
    <van-nav-bar
      z-index="100"
      fixed
      placeholder
      title="选择国家/地区"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-index-bar :sticky-offset-top="44" :index-list="c_phoneAreaList">
      <div v-for="item in phoneAreaList" :key="item.index" :index="item.index">
        <van-index-anchor>{{ item.name }}</van-index-anchor>
        <van-cell
          v-for="(_item, _index) in item.children"
          :key="_index"
          :title="_item.key"
          :value="_item.value"
          @click="setPhoneArea(_item.value)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import PhoneAreaList from '@/assets/js/phoneArea'
export default {
  data () {
    return {
      phoneAreaList: PhoneAreaList
    }
  },
  computed: {
    c_phoneAreaList () {
      return this.phoneAreaList.map(item => item.index)
    }
  },
  methods: {
    setPhoneArea (value) {
      this.setPhoneAreaTop(value)
      this.$router.go(-1)
    },
    ...mapMutations('login', [
      'setPhoneAreaTop'
    ])
  }
}
</script>

<style lang="scss" scoped>
.phone-area-container {
}
</style>
